<template>
    <div class="art-per__wapper">
      <affix
        :label="$t('configLazyLoad.qualityCheck.artificialPerformanceList')">
        <div class="qua-temp__content">
          <el-row :gutter="24">
            <el-col :span="10">
              <artificial-table
                @clickEdit="changeRight"
                :count="count"
                :tableData="tableData"
                @edit="getEditData"
                @stop="stopOrUsePerformanceRelatedNum"
                @search="queryPerformanceRelatedNum"
                @trunPage="queryPerformanceRelatedNum">
              </artificial-table>
            </el-col>
            <el-col :span="14">
              <div class="c-create__box">

                <keep-alive>
                  <component
                  :is="currentView"
                  :cycleOptions="getCycleOptions"
                  @add="savePerformanceRelatedNum"
                  :initData="editData"
                  @cancle="cancle"
                  @update="updatePerformanceRelatedNum"
                  >
                    <!-- 非活动组件将被缓存！ -->
                  </component>
                </keep-alive>
              </div>
            </el-col>
          </el-row>
        </div>
      </affix>
    </div>
</template>
<script>
import Affix from '@/components/ui-modules/affix/Affix'
import ArtificialTable from '../base/artificial-perform/Table'
import AddArtificialPerform from '../curd/artificial-perform/Add'
import UpdateArtificialPerformance from '../curd/artificial-perform/Update'
export default {
  name: 'ArtificialPerformance',
  data () {
    return {
      DCycleOptions: [],
      editData: {},
      currentView: '',
      count: 0,
      tableData: []
    }
  },
  props: {
    cycleOptions: Array
  },
  computed: {
    getCycleOptions () {
      // 获取质检周期模块的质检周期数据，同步质检周期模块的质检周期数据
      let cy = this.cycleOptions && this.cycleOptions.length > 0 ? this.cycleOptions : this.DCycleOptions
      // 过滤掉停用的质检周期
      let cycleId = this.editData.cycle
      let cyNew = []
      cyNew = cy.map(val => {
        if (val.active) {
          return {
            label: val.cycleName,
            value: val._id
          }
        }
      }).filter(Boolean)

      // 在编辑的时候 当质检周期都停用的时候， 人工绩效数 编辑表单 质检周期项会出现质检周期id 为了不出现 给个默认项 不管该周期有没有停用
      if (this.currentView === 'edit' && cyNew.length === 0) {
        this.DCycleOptions.forEach(item => {
          console.log(item._id)
          if (item._id === cycleId) {
            cyNew.push({
              label: item.cycleName,
              value: item._id
            })
          }
        })
      }
      return cyNew
    }
  },
  components: {
    Affix,
    'add': AddArtificialPerform,
    ArtificialTable,
    'edit': UpdateArtificialPerformance
  },
  methods: {
    getEditData (data) {
      this.$set(this, 'editData', JSON.parse(JSON.stringify(data)))
      this.currentView = 'edit'
    },
    updatePerformanceRelatedNum (form) {
      this.$store.dispatch('updatePerformanceRelatedNum', form)
      .then(val => {
        if (val.success) {
          this.$message.success($t('configLazyLoad.qualityCheck.editPerformancesSuccess'))
          this.currentView = ''
          this.queryPerformanceRelatedNum()
        }
      })
    },
    savePerformanceRelatedNum (form) {
      this.$store.dispatch('addPerformanceRelatedNum', form)
      .then(val => {
        if (val.success) {
          this.$message.success($t('configLazyLoad.qualityCheck.addPerformancesSuccess'))
          this.currentView = ''
          this.queryPerformanceRelatedNum()
        }
      })
    },
    stopOrUsePerformanceRelatedNum (data) {
      let req = {
        _id: data.row._id,
        enable: !data.row.enable
      }
      this.$store.dispatch('stopOrUsePerformanceRelatedNum', req)
      .then(() => {
        let msg = !data.row.enable ? this.$t('sms.reuseSuccess') : this.$t('sms.stopSuccess')
        this.$message.success(msg)
        this.queryPerformanceRelatedNum({page: data.page, pageSize: 10})
      })
    },
    queryPerformanceRelatedNum (req = {page: 1, pageSize: 10}) {
      let data = JSON.parse(JSON.stringify(req))
      if (!data.name) {
        delete data.name
      }
      this.$store.dispatch('queryPerformanceRelatedNum', data)
      .then(resp => {
        if (resp) {
          this.showRight = ''
          this.count = resp.count
          this.tableData = resp.list
        }
      })
    },
    cancle () {
      this.currentView = ''
    },
    changeRight (arg) {
      this.currentView = arg
    },
    getCycleOption () {
      this.$store.dispatch('queryQualityCheckCycle', {
        page: 1,
        pageSize: 10
      })
      .then(res => {
        this.DCycleOptions = res.data
      })
    }
  },
  beforeMount () {
    this.queryPerformanceRelatedNum()
    this.getCycleOption()
  }
}
</script>

<style lang="stylus" scoped>
@import "./common"
.art-per__wapper
   height calc(100vh - 142px)
   padding 16px
   overflow auto
</style>
